<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
<html>
<head>
    <meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
    <title>Untitled Document</title>
    <link rel="stylesheet" type="text/css" href="styleB/css.css" />
    <script type="text/javascript" src="jquery-3.5.1.js"></script>
    <script type="text/javascript">

//        $(function () {
//
//            // 创建一个用于复用的删除的function函数
//            var deleteFun = function(){
//
//                // alert("删除 操作 的function : " + this);
//
//                // 在事件响应的function函数中，有一个this对象。这个this对象是当前正在响应事件的dom对象。
//                var $trObj = $(this).parent().parent();
//
//                var name = $trObj.find("td:first").text();
//
//                /**
//                 * confirm 是JavaScript语言提供的一个确认提示框函数。你给它传什么，它就提示什么<br/>
//                 * 当用户点击了确定，就返回true。当用户点击了取消，就返回false
//                 */
//                if( confirm("你确定要删除[" + name +  "]吗？") ){
//                    $trObj.remove();
//                }
//
//                // return false; 可以阻止 元素的默认行为。
//                return false;
//            };
//
//
//
//            // 给【Submit】按钮绑定单击事件
//            $("#addEmpButton").click(function () {
//                // 获取输入框，姓名，邮箱，工资的内容
//                var name = $("#empName").val();
//                var email = $("#email").val();
//                var salary = $("#salary").val();
//
//
//                // 创建一个行标签对象，添加到显示数据的表格中
//                var $trObj = $("<tr>" +
//                    "<td>" + name +  "</td>" +
//                    "<td>" + email + "</td>" +
//                    "<td>" + salary + "</td>" +
//                    "<td><a href=\"deleteEmp?id=002\">Delete</a></td>" +
//                    "</tr>");
//
//
//                // 添加到显示数据的表格中
//                $trObj.appendTo( $("#employeeTable") );
//
//                // 给添加的行的a标签绑上事件
//                $trObj.find("a").click( deleteFun );
//
//
//            });
//
//
//            // 给删除的a标签绑定单击事件
//            $("a").click( deleteFun );
//
//
//        });
        $(function () {
            var del = function () {//封装
                var $th =  $(this).parent().parent();
                var $txt= $th.find("td:first").text();

                if(confirm("确定要删除["+$txt+"]吗？")){
                    $th.remove();
                }
                return false;
            }
            $("#addEmpButton").click(
                function () {
                    var $name =$("#empName").val();
                    var $email =$("#email").val();
                    var $salary =$("#salary").val();
                    var $va=$( "<tr>" +
                    "<td>" + $name + "</td>"+
                    "<td>" + $email + "</td>"+
                    "<td>" + $salary + "</td>"+
                    "<td><a href=\"deleteEmp?id=003\">Delete</a></td>"+
                    "</tr>");
                    $va.appendTo( $("#employeeTable") );
                    $va.find("a").click(del);
                }
            );
            $("a").click(
                del
            );
        });

    </script>
</head>
<body>

<table id="employeeTable">
    <tr>
        <th>Name</th>
        <th>Email</th>
        <th>Salary</th>
        <th>&nbsp;</th>
    </tr>
    <tr>
        <td>Tom</td>
        <td>tom@tom.com</td>
        <td>5000</td>
        <td><a href="deleteEmp?id=001">Delete</a></td>
    </tr>
    <tr>
        <td>Jerry</td>
        <td>jerry@sohu.com</td>
        <td>8000</td>
        <td><a href="deleteEmp?id=002">Delete</a></td>
    </tr>
    <tr>
        <td>Bob</td>
        <td>bob@tom.com</td>
        <td>10000</td>
        <td><a href="deleteEmp?id=003">Delete</a></td>
    </tr>
</table>

<div id="formDiv">

    <h4>添加新员工</h4>

    <table>
        <tr>
            <td class="word">name: </td>
            <td class="inp">
                <input type="text" name="empName" id="empName" />
            </td>
        </tr>
        <tr>
            <td class="word">email: </td>
            <td class="inp">
                <input type="text" name="email" id="email" />
            </td>
        </tr>
        <tr>
            <td class="word">salary: </td>
            <td class="inp">
                <input type="text" name="salary" id="salary" />
            </td>
        </tr>
        <tr>
            <td colspan="2" align="center">
                <button id="addEmpButton" value="abc">
                    Submit
                </button>
            </td>
        </tr>
    </table>
</div>
</body>
</html>
